<template>
<div class="col-md-12">
  <ddis-dev-detail></ddis-dev-detail>
  <my-navbar>
    <template slot="right"> 
      <div class="form-group">
        <label class="control-label">IP</label>
        <input type="text" class="form-control" v-model="ipaddr" debounce="500">
      </div>
      <div class="form-group">
        <label class="control-label">{{$t('list.devType')}}</label>
        <select class="form-control" v-model="devType">
          <option v-for="option in devTypeOptions">{{option}}</option>
        </select>
      </div>   
      <button class="btn btn-default" @click.prevent="onRefresh">
        <span class="glyphicon glyphicon-refresh"></span> {{$t('common.refresh')}}
      </button>
      <button class="btn btn-default" @click.prevent="onSearch">
        <span class="glyphicon glyphicon-search"></span> {{$t('common.search')}}
      </button>            
    </template> 
  </my-navbar>
  <div class="col-md-12">
    <my-table :cfg="cfg" :list="devs" :loading="ddis.loading"></my-table>
  </div>  
</div>
</template>

<script>
import _ from 'lodash'
import ebus from 'libs/ebus.js'
import toast from 'libs/toast.js'
import msgbox from 'libs/msgbox.js'
import locales from '../locales/ddisDevList.js'
import {List} from '../configs/ddisDevList.js'
import * as actions from 'share/server/vuex/actions/devmng.js'
import {devmngApi} from 'share/server/api.js'
import DdisDevDetail from './DdisDevDetail.vue'

export default {
  locales,
  components: {
    'ddis-dev-detail': DdisDevDetail,
  },
  vuex: {
    getters: {
      ddis: (state) => state.devmng.ddis
    },
    actions
  },
  data () {
    return {
      cfg: {
        checkable: false,
        showHead: true,
        columns: new List(this),
        operation: {
          name: this.$t("common.operation"),
          width: 'auto',
          actions: [{
            icon: 'glyphicon glyphicon-search',
            isShow: this.isShow,
            doClick: this.onShowLocation
          }, {
            icon: 'glyphicon glyphicon-edit',
            isShow: this.isShow,
            doClick: this.onShowDetail
          }]
        }    
      },
      ipaddr: '',
      devType: this.$t('common.all')
    }
  },
  computed: {
    devTypeOptions () {
      var devTypes = _.uniq(_.map(this.ddis.list, 'devType'))
      devTypes.splice(0, 0, this.$t('common.all'))
      return devTypes
    },
    devs () {
      var devs = this.ddis.list

      if (this.devType !== this.$t('common.all')) {
        devs = _.filter(devs, function(item) {
          return this.devType === item.devType
        }.bind(this))
      }

      if (this.ipaddr !== '') {
        devs = _.filter(devs, function(item) {
          return item.ipaddr.includes(this.ipaddr)
        }.bind(this))
      }

      return _.orderBy(devs, ['ipaddr'], ['asc'])
    }
  },
  methods: {
    onRefresh () {
      this.doLoadDdisDevs()
    },
    onSearch () {
      msgbox.showWait(this.$t('alert.plzWait'), this.$t('common.searching'), 3)
      devmngApi.sendCmd('search').then(function(res) {
        if (res && res.data && res.data.code === 0) {
          setTimeout(this.doLoadDdisDevs, 3000)
        } else {
          toast.code(this, res.data)
        }
      }.bind(this))
    },   
    isShow (item) {
      let ddisDev = item
      if ((ddisDev.devType === 'encoder')
       || (ddisDev.devType === 'decoder')
       || (ddisDev.devType === 'control.stm32')) {
        return true
      } else {
        return false
      }
    },
    onShowLocation (item) {
      devmngApi.sendCmd('showLocation', {devSN: item.devSN})
    },
    onShowDetail (item) {
      ebus.emit('show-ddis-dev-detail', item)
    }
  }
}
</script>

<style>
</style>